<template>
	<view class="login">
		<view style="width: 100%">
			<image :src="bg" mode="widthFix" style="width: 100%"></image>
		</view>
		<view class="footer">
			<view class="content flex jc_start ai_center">
				<image :src="qrcode" mode="aspectFill" class="qrcode"></image>
				<image :src="userinfo.avatar" mode="scaleToFill" class="images"></image>
				<view class="tip">
					<view class="name">{{userinfo.nickname}}</view>
					<view class="job">邀请您加入AI次元！！</view>
				</view>
			</view>
			<view class="btn">长按图片保存手机</view>
		</view>
		<image v-if="toCanvas" :src="toCanvas" style="width: 100%;height:100%;position: absolute;top: 0;left: 0;"></image>
	</view>
</template>

<script>
	import html2canvas from '@/static/js/html2canvas.js'
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	export default {
		data() {
			return {
				bg: "",
				qrcode: "",
				userinfo: {},
				toCanvas: ''
			};
		},
		onLoad() {
			this.userinfo = uni.getStorageSync("userInfo");
			this.getShareCover();
			this.getUserQrCode()
		},
		onReady() {
			setTimeout(()=>{
				this.save()
			},2000)
		},
		methods: {
			save() {
				html2canvas(document.querySelector('.login'), {
					useCORS: true //很重要支持跨域图片，否则需要自己将线上图片转为本地图片（转base64）
				}).then(canvas => {
					let url = canvas.toDataURL("image/png");
					this.toCanvas = url
				})
			},
			async getShareCover() {
				this.get('index/shareCover').then(res => {
					this.bg = res.data.image.replace('https://wzaiciyuan-1254208124.cos.ap-nanjing.myqcloud.com','https://aicy.xmshensou.com/cos-images')
					console.log(this.bg)
				})
			},
			async getUserQrCode() {
				this.get('user/qrcode').then(res => {
					this.qrcode = res.data.qrcode
				})
			},

		}
	};
</script>

<style scoped lang="scss">
	.login {
		width: 100%;
		height: 100vh;
		position: relative;
		overflow: hidden;

		.images {
			width: 110rpx;
			height: 110rpx;
			border-radius: 8rpx;
		}

		.footer {
			padding: 30rpx;
			box-sizing: border-box;

			background: #ffffff;
			font-size: 16px;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #ffffff;

			.content {
				position: relative;
				padding: 30rpx 0;
			}

			.qrcode {
				position: absolute;
				bottom: 30rpx;
				right: 30rpx;
				width: 240rpx;
				height: 240rpx;
				border-radius: 8rpx;
			}

			.tip {
				margin-left: 20rpx;
			}

			.name {
				font-size: 32rpx;
				font-weight: 600;
				margin-bottom: 16rpx;
			}

			.job {
				font-size: 24rpx;
				color: #666666;
			}

			.btn {
				width: 700rpx;
				text-align: center;
				border-radius: 36rpx;
				background: linear-gradient(274deg, #17FEE9 0%, #94FDC4 100%);
				margin: 28rpx auto;
				height: 80rpx;
				line-height: 80rpx;
			}

		}
	}
</style>